<template>
  <view class="wh_750 flex flex-column align-center bg_F5F5F5 pageHeight">
    <s-header-title is-fixed is-display-back title="拾亲登录"></s-header-title>
    <view class="hW_252"></view>
    <view class="wh_750 flex align-center justify-center">
      <image :src="`${nc_url}/assets/icon/shiqin_icon.jpg`" class="wh_152 hW_152" style="border-radius: 50%"></image>
    </view>
    <view class="mt_32 fs_38 color_4B4B4B" style="line-height: 56rpx">
      拾亲
    </view>
    <view class="wh_750">
      <!-- #ifdef MP-WEIXIN -->
      <button v-if="page.protocol" hover-class="none" open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber" class="btn1">
        授权登录
      </button>
      <button v-else hover-class="none"
              @click.stop="openLoginPopup"
              class="btn1">
        授权登录
      </button>
      <!-- #endif -->
      <button hover-class="none" @click="mobileNumberLogin" class="btn2">
        手机号登录
      </button>
    </view>
    <view class="fs_26 color_9F9F9F fw_500" @click="sheep.$router.back()">暂不登录</view>

    <view class="protocol flex align-center justify-center  z-1" @click="page.protocol = true">
      <checkbox-group @change="changeCheck" @click.stop>
        <checkbox style="border-radius: 50%;transform:scale(0.7)"
                  :checked="page.protocol ? true : false"
                  color="#ff4206"
        />
      </checkbox-group>
      我已阅读并遵守
      <text class="font-num"
            @click.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"
      >
        《{{ appInfo.user_protocol.title }}》
      </text>
      与
      <text class="font-num"
            @click.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)"
      >
        《{{ appInfo.privacy_protocol.title }}》
      </text>
    </view>


    <first_popup ref="loginFirstPopup">
      <view class="loginFirstPopup">
        <view class="loginFirstPopup_header">
          <view class="loginFirstPopup_header_tips" style="padding: 0 24rpx">
            <text class="loginFirstPopup_header_tips_standard">为了让您更好的使用拾亲，请充分阅读并同意
            </text>
            <text class="loginFirstPopup_header_tips_click font-num"
                  @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">
              《{{ appInfo.user_protocol.title }}》
            </text>
            <text class="loginFirstPopup_header_tips_standard">和</text>
            <text class="loginFirstPopup_header_tips_click font-num"
                  @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">
              《{{ appInfo.privacy_protocol.title }}》
            </text>
          </view>
        </view>
        <view class="loginFirstPopup_bottom flex justify-around">
          <button class="loginFirstPopup_bottom_closeButton flex align-center justify-center" hover-class="none"
                  @tap="closeLoginFirstPopup">
            <text class="loginFirstPopup_bottom_closeButton_text">取消</text>
          </button>
          <button hover-class="none" open-type="getPhoneNumber"
                  @getphonenumber="getPhoneNumber"
                  class="loginFirstPopup_bottom_confirmButton bg-color flex align-center justify-center">
            <text class="loginFirstPopup_bottom_confirmButton_text">同意</text>
          </button>
        </view>
      </view>
    </first_popup>
  </view>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import First_popup from '@/pages/login/components/first_popup.vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { onReady, onLoad } from '@dcloudio/uni-app';

  const page = reactive({
    store_user_agreement: true,
    protocol: false,
    options: {},
  });
  const nc_url = computed(() => sheep.$store('AI').nc_image);
  const appInfo = computed(() => sheep.$store('app').info);
  const loginFirstPopup = ref();
  const isLogin = computed(() => sheep.$store('user').isLogin);
  // #ifdef H5
  const mode = computed(() => uni.getStorageSync('currentMode'));
  // #endif

  onLoad((options) => {
    // #ifdef H5
    console.log(mode);
    if(mode.value == 'PC'){
      uni.navigateTo({
        url: '/pages/pc/login',
      })
    }
    // #endif

    page.options = options;
    if(!isLogin.value){
      let accountList = JSON.parse(uni.getStorageSync('account-list') || '[]');
      if (accountList.length > 0) {
        uni.removeStorageSync('account-list')
      }
    }
  });

  onReady(() => {
    if (!!isLogin.value && page.options.is_toggle != 1) {
      uni.switchTab({
        url: '/pages/message/genealogy',
      });
    }
  });

  async function getPhoneNumber(e) {
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
      return false;
    }
    const { data } = await sheep.$api.third.wechat.getUserPhoneNumber({
      code: e.detail.code,
      platform: 'miniProgram',
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
      sessionId: uni.getStorageSync('sessionId'),
    });
    let accountList = JSON.parse(uni.getStorageSync('account-list') || '[]');
    let arr = accountList.filter((item) => item.account == data);
    if (arr.length > 0) {
      sheep.$helper.toast('该账号已存在');
      closeLoginFirstPopup();
      return;
    }
    const { code, msg } = await sheep.$api.user.smsLogin({
      mobile: data,
      code: sheep.$store('app').code,
      is_toggle: page.options.is_toggle,
    });
    if (code == 1) {
      const userInfo = await sheep.$store('user').getInfo();
      await addAccount();

      if (!userInfo.surname || !userInfo.daimyo) {
        uni.reLaunch({
          url: '/pages/userData/sex',
        });
      } else {
        if (page.options.is_toggle == 1) {
          uni.navigateBack();
        } else {
          uni.switchTab({
            url: '/pages/message/genealogy',
          });
        }
      }
      await sheep.$store('AI').setAllSessionList();
      await sheep.$store('AI').setAllFollowList();
      await sheep.$store('family').getList();
      await sheep.$store('family').getFamilyTree();
      const bind_id = computed(() => sheep.$store('AI').bind_id);
      const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
      if (!!bind_id.value) {
        await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      }
      if (!!bind_family_id.value && !!isLogin.value) {
        const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
        if (code == 1) {
          sheep.$store('AI').setBindFamilyId('');
        }
      }
    }
  }

  function mobileNumberLogin() {
    sheep.$router.go('/pages/login/phoneLogin', { is_toggle: page.options.is_toggle == 1 ? 3 : 0 });
  }

  // 查看协议
  function onProtocol(id, title) {
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  function changeCheck(e) {
    page.protocol = !!e.detail.value;
  }

  function closeLoginFirstPopup() {
    loginFirstPopup._value.closePopup();
  }

  function openLoginPopup() {
    loginFirstPopup._value.openPopup({
      title: '欢迎使用拾亲',
      isShowConfirm: false,
      showColseButton: false,
    });
  }

  async function addAccount() {
    const userInfo = await sheep.$store('user').getInfo();
    let accountList = JSON.parse(uni.getStorageSync('account-list') || '[]');
    let arr = [];
    accountList.forEach((item) => {
      arr.push(item);
    });
    arr.push({
      account: userInfo.mobile,
      avatar: userInfo.avatar,
    });
    uni.setStorageSync('account-list', JSON.stringify(arr));
  }
</script>


<style scoped lang="scss">
  .btn1 {
    height: 86rpx;
    line-height: 86rpx;
    border-radius: 120rpx;
    font-size: 36rpx;
    font-weight: 500;
    background: #FE5C2D;
    margin: 120rpx 66rpx 40rpx 66rpx;
    color: #FFFFFF;
  }

  .btn2 {
    height: 86rpx;
    line-height: 86rpx;
    border-radius: 120rpx;
    font-size: 36rpx;
    font-weight: 500;
    margin: 40rpx 66rpx;
    color: #666666;
    border: 3rpx solid #E4E4E4;
  }

  .protocol {
    position: fixed;
    bottom: 52rpx;
    left: 0;
    width: 100%;
    margin: 0 auto;
    color: #999999;
    font-size: 24rpx;
    line-height: 22rpx;
    text-align: center;
    bottom: calc(52rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    bottom: calc(52rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

    .check {
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #D1D1D1;
      border-radius: 50%;
    }
  }

  .font-num {
    color: #ff4206;
  }

  .centralPoint {
    width: 20rpx;
    height: 20rpx;
    background: #ff4206;
    border-radius: 50%;
  }

  .loginFirstPopup {
    .loginFirstPopup_header {
      .loginFirstPopup_header_tips {
        .loginFirstPopup_header_tips_standard {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
        }

        .loginFirstPopup_header_tips_click {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #4887FF;
        }
      }
    }

    .loginFirstPopup_bottom {
      margin: 54rpx 0;

      .loginFirstPopup_bottom_closeButton {
        width: 213rpx;
        height: 80rpx;
        background: #A0A0A0;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .loginFirstPopup_bottom_closeButton_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }
      }

      .loginFirstPopup_bottom_confirmButton {
        width: 213rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .loginFirstPopup_bottom_confirmButton_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
